<template>
	<view style="display: flex;margin:0 auto;flex-direction: column; width: 749rpx;">
		<!-- 搜索框 -->
		<view
			style="display:flex;width: 700rpx ;background-color:#F2F2F2;align-items: center;justify-content: center;margin: 10rpx auto;border-radius:40rpx;">
			<u-search margin="0 30rpx 0 0" placeholder="请输入老师姓名或手机号" actionText="搜索" v-model="nameormobile"
				@search="usersearch" @custom="usersearch"></u-search>
		</view>
		<!-- 固定图标的添加按键 -->
		<view @click="xianshi()"
			style="position:fixed;top: 250rpx;z-index: 100; right: 30rpx;border-radius: 50%;background-color:blue;display: flex;justify-content: center;align-items: center;width: 100rpx;height: 100rpx;">
			<image style="width: 80rpx;height: 80rpx;" src="../../static/10.png" mode=""></image>
		</view>
		<!-- 教务老师 任课老师 -->
		<view style="position: sticky;top: 80rpx;z-index: 1;box-shadow:4rpx 3rpx 5rpx #c2c2c2;background-color: white;">
			<u-tabs style="display: flex; height: 80rpx;padding: 0 20rpx;justify-content: center;" :current="current"
				:list="shenfen" scroll-y="true" lineWidth="50" lineColor="blue"
				:activeStyle="{ color: 'black',  transform: 'scale(1)'}"
				:inactiveStyle="{color: '#606266',transform: 'scale(0.9)'}" @change="change">
			</u-tabs>
		</view>

		<!-- 教务老师和任课老师的展示-->
		<view v-for="item2 in laoshi" :key=item2._id
			style="display: flex;flex-direction: row;padding: 0 20rpx; align-items: center;justify-content: center;">
			<view @click="xiugailaoshi_model(item2)"
				style="display: flex;border-radius: 18rpx;overflow: hidden; width:100%;background-color: white;box-shadow: 1px 1px 5px #c2c2c2;margin:10rpx 0;justify-content: space-between;align-items: center;">
				<view style="display: flex;; width: 140rpx;height: 140rpx;align-items: center;margin-right: 20rpx;">
					<image style="height: 140rpx;width: 120rpx;" :src="item2.avatar" mode="aspectFill"></image>
				</view>
				<view style="display: flex;flex-direction: column;flex: 3;">
					<view>
						{{item2.name}}
					</view>
					<view style="color: #c2c2c2;font-size: 28rpx;margin-top: 15rpx;">
						Tel:{{item2.mobile.substring(0,3)}}****{{item2.mobile.substring(item2.mobile.length-4,item2.mobile.length)}}
					</view>
				</view>
			</view>
		</view>

		<!-- 下面是添加新老师出现的弹窗 -->
		<model v-if='show1' @colseModel='show1 = false'>
			<view
				style="display: flex;background-color: blue;color: white;border-radius: 20rpx;padding: 15rpx ; margin: 25rpx auto;justify-content: center;">
				{{shu1}}老师信息！
			</view>
			<view style="display: flex;margin-bottom: 10rpx;">输入老师名字</view>
			<uni-easyinput type="text" v-model="shu3" />
			<view style="display: flex;margin-bottom: 10rpx;margin-top: 30rpx;">输入老师电话</view>
			<uni-easyinput :focus="telfocus" style="margin-bottom: 20rpx;" type="number" v-model="tel"
				@blur="chaxuntel" />
			<view style="display: flex;margin-bottom: 10rpx;margin-top: 30rpx;">选择老师身份</view>
			<picker @change="shenfenxuanze" :range="laoshishenfen">
				<uni-easyinput type="text" v-model="laoshishenfen1" placeholder="请选择老师身份" suffixIcon="bottom" />
			</picker>
			<view v-if="shu5" style="display:flex;flex-direction: row;margin:40rpx auto;">
				<image style="display: flex; width:200rpx;height:200rpx;z-index:99" :src="shu5" mode=" aspectFill">
				</image>
				<uni-icons @click="shanchuzhaopian(shu5)"
					style="display: flex;width: 50rpx;height: 50rpx;border-radius: 50%;justify-content: center;align-items: center; font-size: 45rpx;color: white;margin-left: -20rpx;background-color: blue;z-index: 100;"
					type="close"></uni-icons>
			</view>
			<view v-if="!shu5">
				<uni-file-picker limit="1" :del-icon="false" :imageStyles="imageStyles" file-mediatype="image"
					@success="fanhuiurl">照片上传</uni-file-picker>
			</view>
			<view style="display: flex;width: 80%;justify-content: space-around;margin: 30rpx auto;color: white;">
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="show1 = false">取消</view>
				<view style="display: flex;background-color: blue;border-radius: 15rpx;padding: 20rpx 60rpx;"
					@click="xinlaoshi()">确定</view>
			</view>
			<view v-if="meiyi_userinfo.permission.indexOf('del_laoshi')!=-1" @click="shanchulaoshi()"
				style="display: flex;margin: 60rpx auto 0 auto;justify-content: center;">
				删除老师信息!!!
			</view>
		</model>
	</view>
</template>

<script>
	// import md5 from '@/util/md5';
	import model from '../../components/model.vue'
	import getDateTime from '@/common/getdateTime.js';
	export default {
		components: {
			model
		},
		data() {
			return {
				nameormobile: '',
				telfocus: false, //电话输入框是否自动获取焦点
				current: 0,
				laoshi: [],
				laoshiinfo: [], //老师的原始信息
				shenfen: [{
					name: '教务老师'
				}, {
					name: '任课老师'
				}],
				laoshishenfen: ['教务老师', '任课老师', '教务&任课老师'],
				laoshishenfen1: '',
				show1: false, //教务老师弹窗
				show2: false, //编辑符号
				show3: false, //删除符号
				shu1: '编辑还是添老师',
				shu2: '删除教务老师',
				shu3: '', //教务老师名字
				tel: '', //教务老师电话
				shu5: '', //上传主照片的地址
				shu6: 0, //最上面标签栏的选择，0为教务老师，1为任课老师，
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "blue",
						width: 2,
						style: 'dashed',
						radius: '12px'
					}
				},
			}
		},
		async onLoad() {
			this.meiyi_userinfo = await uniCloud.getCurrentUserInfo()
			let meiyi_name_tel = await uni.getStorageSync('meiyi_name_tel')
			this.jingshouren = meiyi_name_tel.name + meiyi_name_tel.mobile
			this.jiaowu()
		},
		methods: {
			//点搜索时的反应
			usersearch() {
				if (this.shu6) {
					this.renke()
				} else {
					this.jiaowu()
				}
			},
			//查询手机号是否存在，如果存在提示
			chaxuntel() {
				this.telfocus = false
				// 检查手机号是否正确
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.tel)) {
					this.telfocus = true
					return uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						mask: true
					})
				}
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 14,
						tel: this.tel
					}
				}).then(res => {
					if (res.result.data.length) {
						uni.showToast({
							title: '手机号码已使用，请检查，或更换手机号……',
							icon: 'none',
							mask: true,
							duration: 3000
						})
						this.tel = ''
					}
				})
			},
			// 删除老师的照片
			shanchuzhaopian() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 0, //类型为7时，某个校区的教室
						picurl: [this.shu5],
					}
				}).then(res => {
					this.shu5 = ''
					uni.showToast({
						title: '删除成功！',
						icon: 'none',
						duration: 1000
					})
				})
			},
			// 下面是点修改老师进入的弹窗
			xiugailaoshi_model(item) {
				this.laoshiinfo = item
				this.shu2 = item._id
				this.show1 = true
				this.shu1 = '修改'
				this.shu3 = item.name
				this.tel = item.mobile
				this.laoshishenfen1 = (item.role.includes("jiaowulaoshi") && item.role.includes("renkelaoshi")) ?
					"教务&任课老师" : (item.role.includes("jiaowulaoshi")) ? "教务老师" : "任课老师"
				this.shu5 = item.zhaopian
			},
			// 下面是添加老师显示的弹窗
			xianshi() {
				this.shu1 = '添加'
				this.show1 = true
				this.shu2 = this.shu3 = this.tel = this.shu5 = this.laoshishenfen1 = ''
			},
			//调取教务老师数据
			jiaowu() {
				uni.showLoading({
					title: '加载教务老师中……',
					mask: true
				});
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 10, //类型为10时，获取教务老师名单 
						role: 'jiaowulaoshi',
						keyword: this.nameormobile
					}
				}).then(res => {
					console.log(res);
					this.nameormobile = ''
					this.laoshi = res.result.data
					uni.hideLoading()
				})
			},
			//调取任课老师数据
			renke() {
				uni.showLoading({
					title: '加载任课老师中……',
					mask: true
				});
				uniCloud.callFunction({
					name: "funshare",
					data: {
						leixing: 10, //获取任课老师名单 
						role: "renkelaoshi",
						keyword: this.nameormobile
					}
				}).then(res => {
					console.log(res);
					this.nameormobile = ''
					this.laoshi = res.result.data
					uni.hideLoading()
				})
			},
			//更改标签时，运行不同的代码
			change(e) {
				if (e.index == 1) {
					this.shu6 = 1
					this.renke()
					this.nameormobile = ''
				} else {
					this.shu6 = 0
					this.jiaowu()
					this.nameormobile = ''
				}
			},
			//老师身份的选择
			shenfenxuanze: function(e) {
				this.laoshishenfen1 = this.laoshishenfen[e.detail.value]
			},
			// 下面是删除老师操作
			//一、删除空间中老师图片，二、userinfo库删除老师数据，三、xiugaishuju库中添加一条信息
			shanchulaoshi() {
				uni.showModal({
					title: '重要提示',
					content: '再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？再次确认，一定要删除吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							let lin1 = 0
							let lin2 = 0
							uni.showLoading({
								title: '删除中……',
								mask: true
							});
							uniCloud.callFunction({
								name: "delpic",
								data: {
									leixing: 0, //删除老师的图片
									picurl: [this.shu5],
								}
							}).then(res => {
								lin1 = 9
								this.shu5 = ''
								if (lin1 == 9 || lin2 == 9) {
									uni.hideLoading()
									uni.showToast({
										title: '删除成功！',
										icon: 'none',
										duration: 1000
									})
								}
							})
							uniCloud.callFunction({
								name: "delpic",
								data: {
									leixing: 7, //在userinfo中，删除老师的信息
									id: this.shu2,
									riqi: getDateTime.dateTimeStr('y-m-d h:i:s'),
									jingshouren: this.jingshouren,
									detail: '删除老师数据，老师信息：' + this.shu3 + this.tel + ',身份：' + this
										.laoshishenfen1
								}
							}).then(res => {
								lin2 = 9
								if (lin1 == 9 || lin2 == 9) {
									uni.hideLoading()
									uni.showToast({
										title: '删除成功！',
										icon: 'none',
										duration: 1000
									})
								}
								if (this.shu6 == 0) {
									this.jiaowu()
								} else {
									this.renke()
								}
							})
							this.show1 = false
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 图片上传成功
			fanhuiurl(e) {
				this.shu5 = e.tempFiles[0].fileID
			},
			//修改老师数据，一、userinfo库中修改老师，二、xiugaishuju库中添加一条
			xiugailaoshi() {
				uni.showLoading({
					title: '老师信息修改中……',
					mask: true
				});
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 5, //修改老师内容
						name: this.shu3,
						tel: this.tel,
						zhaopian: this.shu5,
						id: this.shu2,
						riqi: getDateTime.dateTimeStr('y-m-d h:i:s'),
						detail: '老师姓名【' + this.laoshiinfo.name + '】→【' + this.shu3 + '】，老师电话：【' + this.laoshiinfo
							.tel + '】→【' + this.tel + '】，老师身份：【' + this.laoshiinfo.shenfen + '】→【' + this
							.laoshishenfen1 + '】',
						role: this.laoshishenfen1 == "教务老师" ? ["jiaowulaoshi"] : this.laoshishenfen1 == "管理员" ? [
								"guanliyuan"
							] : this.laoshishenfen1 == "教务&任课老师" ? ["jiaowulaoshi", "renkelaoshi"] : this
							.laoshishenfen1 == "任课老师" ? ["renkelaoshi"] : this.laoshishenfen1 == "学生" ? [
							"xuesheng"] : "",
						jingshouren: this.jingshouren
					}
				}).then(res => {
					this.show1 = false
					uni.hideLoading()
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						mask: true
					})
					if (this.shu6 == 0) {
						this.jiaowu()
					} else {
						this.renke()
					}
				})
			},
			// 通过条件判断是添加老师还是修改老师
			xinlaoshi() {
				uni.showLoading({
					title: '数据处理中……',
					mask: true
				});
				//检查名字是否添写
				if (!this.shu3) {
					uni.showToast({
						title: '请填写老师名字！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				// 检查手机号是否正确
				let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				if (!myreg.test(this.tel)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						mask: true
					})
					uni.hideLoading()
					return
				}
				//是否已选老师的身份
				if (!this.laoshishenfen1) {
					uni.showToast({
						title: '请选择老师的身份！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				//检查照片是否选择
				if (!this.shu5) {
					uni.showToast({
						title: '请选择老师照片！',
						icon: 'none',
						duration: 1000
					})
					uni.hideLoading()
					return
				}
				//修改老师信息
				if (this.shu2) {
					// 修改教务老师的内容
					this.xiugailaoshi()
				} else {
					//添加老师数据
					this.tianjialaoshi1()
				}
			},
			//一、uni-id-users中添加老师数据，二、xiugaishuju库中添加一条
			tianjialaoshi1() {
				uni.showLoading({
					title: '新建老师数据……',
					mask: true
				});
				let users = {}
				let xiugai_shuju = {}
				users.password =
					"$UNI_ID_HMAC_SHA256$20$4309ffdb6d49c3caf938b6bb234f376235208aa8943de814f8fd83156a99165a13d2d5cb10c4666dd97b",
					users.password_secret_version = 1,
					users.name = this.shu3,
					users.mobile = this.tel,
					users.mobile_confirmed = 1,
					users.avatar = this.shu5,
					users.role = this.laoshishenfen1 == "教务老师" ? ["jiaowulaoshi"] : this.laoshishenfen1 == "管理员" ? [
						"guanliyuan"
					] : this.laoshishenfen1 == "教务&任课老师" ? ["jiaowulaoshi", "renkelaoshi"] : this.laoshishenfen1 ==
					"任课老师" ? ["renkelaoshi"] : this.laoshishenfen1 == "学生" ? ["xuesheng"] : "",
					users.jingshouren = this.jingshouren,
					users.register_date = getDateTime.dateTimeStr('y-m-d h:i:s'),
					xiugai_shuju.detail = '添加老师，姓名:' + this.shu3 + ',电话：' + this.tel + '，身份：' + this.laoshishenfen1,
					xiugai_shuju.riqi = getDateTime.dateTimeStr('y-m-d h:i:s'),
					xiugai_shuju.jingshouren = this.jingshouren,
					xiugai_shuju.leibie = "添加老师数据"
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 6, //添加老师内容
						users: users,
						xiugai_shuju: xiugai_shuju
					}
				}).then(res => {
					this.show1 = false
					uni.hideLoading()
					uni.showToast({
						title: '添加成功',
						icon: 'none',
						mask: true
					})
					if (this.shu6 == 0) {
						this.jiaowu()
					} else {
						this.renke()
					}
				})
			},
			//添加老师时出现的弹窗
			tianjialaoshi() {
				this.show1 = true
				this.shu3 = ''
				this.tel = ''
				this.shu5 = ''

			},
		}
	}
</script>

<style>

</style>